---
title: "Margin"
description: "Utilities for controlling an element's margin."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/margin'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirstByPrefix } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirstByPrefix,
}

## Add margin to a single side

Control the margin on one side of an element using the `m{t|r|b|l}-{size}` utilities.

For example, `mt-6` would add `1.5rem` of margin to the top of an element, `mr-4` would add `1rem` of margin to the right of an element, `mb-8` would add `2rem` of margin to the bottom of an element, and `ml-2` would add `0.5rem` of margin to the left of an element.

```html rose
<template preview>
  <div class="flex flex-wrap justify-around items-center text-white font-mono">

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mt-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mt-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mr-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mr-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="mb-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">mb-8</div>
    </div>

    <div class="bg-stripes bg-stripes-rose-500 overflow-hidden m-2 sm:m-0">
      <div class="ml-8 bg-rose-500 flex rounded-md items-center justify-center py-3 px-4">ml-8</div>
    </div>
  </div>
</template>

<div class="**mt-8** ...">mt-8</div>
<div class="**mr-8** ...">mr-8</div>
<div class="**mb-8** ...">mb-8</div>
<div class="**ml-8** ...">ml-8</div>
```

## Add horizontal margin

Control the horizontal margin of an element using the `mx-{size}` utilities.

```html purple
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-purple-500">
      <div class="mx-8 bg-purple-500 rounded-md flex items-center justify-center py-3 px-4">mx-8</div>
    </div>
  </div>
</template>

<div class="**mx-8** ...">mx-8</div>
```

## Add vertical margin

Control the vertical margin of an element using the `my-{size}` utilities.

```html emerald
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-emerald-500">
      <div class="my-8 bg-emerald-500 rounded-md flex items-center justify-center py-3 px-4">my-8</div>
    </div>
  </div>
</template>

<div class="**my-8** ...">my-8</div>
```

## Add margin to all sides

Control the margin on all sides of an element using the `m-{size}` utilities.

```html lightBlue
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="bg-stripes bg-stripes-light-blue-500">
      <div class="m-8 bg-light-blue-500 rounded-md flex items-center justify-center py-3 px-4">m-8</div>
    </div>
  </div>
</template>

<div class="**m-8** ...">m-8</div>
```

## Negative margins

Control the negative margin of an element using the `-m{side?}-{size}` utilities.

```html fuchsia
<template preview>
  <div class="flex justify-around items-center text-white font-mono">
    <div class="flex flex-col items-center">
      <div class="relative w-32 h-16 bg-fuchsia-300 rounded-md overflow-hidden">
        <div class="absolute bottom-0 w-full h-8 bg-stripes bg-stripes-red-900"></div>
      </div>
      <div class="relative -mt-8 bg-fuchsia-500 rounded-md flex items-center justify-center py-3 px-4">-mt-8</div>
    </div>
  </div>
</template>

<div class="w-32 h-16 bg-fuchsia-300 ..."></div>
<div class="**-mt-8** bg-fuchsia-500 ...">-mt-8</div>
```

---

## Responsive

To control the margin of an element at a specific breakpoint, add a `{screen}:` prefix to any existing margin utility. For example, adding the class `md:my-8` to an element would apply the `my-8` utility at medium screen sizes and above.

```html
<div class="mt-8 **md:my-8**">
    <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

---

## Customizing

### Margin scale

By default, Tailwind provides 20 margin utilities for each side and axis.

If you'd like to customize these values for padding, margin, width, and height all at once, use the `theme.spacing` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

To customize only the margin values, use the `theme.margin` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      margin: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Negative values

If you'd like to add additional negative margin classes (taking the form `-m{side?}-{size}`), prefix the keys in your config file with a dash:

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        margin: {
+         '-72': '-18rem',
        }
      }
    }
  }
```

Tailwind is smart enough to generate classes like `-mx-72` when it sees the leading dash, not `mx--72` like you might expect.

### Variants

<Variants plugin="margin" />

### Disabling

<Disabling plugin="margin" />
